import goodsLess from "./goods.module.less";
import { formatNumber } from "@/utils/PublicFunction";

function Goods(props: any) {
  return (
    <>
      <div className={goodsLess.goodsContent}>
        <div className="top_img">
          <img src={props.item.WelfareImg} alt="" />
        </div>
        <div className="bottom_content">
          <div className="center_name">{props.item.WelfareName}</div>
          <div className="tabs">
            {JSON.parse(props.item.WelfareTabs).map(
              (itemTow: String, index: number) => {
                return (
                  <div className="tabs_item" key={index}>
                    {itemTow}
                  </div>
                );
              }
            )}
          </div>
          <div className="goods_info">
            <div className="left_price">
              <div className="icon iconfont icon-kuangshi1"></div>
              <div className="price">
                <div className="xPrice">
                  {formatNumber(props.item.CurrentPrice)}
                </div>
                {props.item.OriginalPrice && props.item.OriginalPrice >= 0 && (
                  <div className="yPrice">
                    {formatNumber(props.item.OriginalPrice)}
                  </div>
                )}
              </div>
            </div>
            <div className="right_exchange_num">
              {formatNumber(props.item.BuyPeopleNum)}人已兑
            </div>
          </div>
        </div>
        <div className="bottom_btn">
          {props.item.DayResidueNum === 0 ? (
            <div className="no_btn">今日已抢光</div>
          ) : (
            <div
              className="btn"
              onClick={() =>
                props.exChange(
                  props.item.WelfareGoodsId,
                  props.item.WelfareHeightTypeCode,
                  props.item.CurrentPrice
                )
              }
            >
              兑换
            </div>
          )}
        </div>
      </div>
    </>
  );
}

export default Goods;
